<template>
	<view class="tree-select">
		<view v-for="(node, index) in treeData" :key="node.id || index" class="tree-node">
			<!-- 节点内容（包含图标、名称） -->
			<view class="node-content" :class="{ 'node-selected': node.id === selectedNodeId }"
				@click.stop="handleNodeClick(node)">
				<!-- 层级缩进（根据level计算） -->
				<view class="node-indent" :style="{ width: `${node.level * 30}rpx` }"></view>



				<!-- 节点名称 -->
				<text class="node-name">{{ node.deptName }}</text>
				<!-- 展开/收起图标（仅非叶子节点显示） -->
				<u-icon v-if="!node.isLeaf" :name="node.isExpanded ? 'arrow-up' : 'arrow-down'" size="16" color="#666"
					class="node-icon"
					:style="{ transform: node.isExpanded ? 'rotate(0deg)' : 'rotate(0deg)' }"></u-icon>
			</view>

			<!-- 递归渲染子节点（仅当展开时显示） -->
			<tree-select v-if="!node.isLeaf && node.isExpanded && node.children && node.children.length"
				:tree-data="node.children" :level="node.level + 1" :selected-node-id="selectedNodeId"
				@node-select="handleChildSelect"></tree-select>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TreeSelect',
		props: {
			// 树形数据（必须包含id、name、isLeaf、children、isExpanded字段）
			treeData: {
				type: Array,
				default: () => []
			},
			// 当前节点层级（根节点为0）
			level: {
				type: Number,
				default: 0
			},
			// 选中节点的id（用于高亮）
			selectedNodeId: {
				type: [Number, String],
				default: ''
			}
		},
		methods: {
			/**
			 * 节点点击事件
			 * @param {Object} node 当前节点数据
			 */
			handleNodeClick(node) {
				// this.$emit('node-select', node);
				// node.isExpanded = !node.isExpanded;
				
				
				// 非叶子节点（可展开/收起）
				// if (!node.isLeaf) {
				// 	// 切换展开状态（核心逻辑）
				// 	node.isExpanded = !node.isExpanded;
				// }
				// // 叶子节点（如网点）：触发选中事件（不处理展开）
				// else {
				// 	this.$emit('node-select', node);
				// }
				
				
				if (node.isLeaf) {
				    this.$emit('node-select', node); // 叶子节点才触发选中
				  } else {
				    node.isExpanded = !node.isExpanded; // 非叶子节点只切换展开状态
				  }
			},
			/**
			 * 子节点选中事件向上传递
			 * @param {Object} node 子节点数据
			 */
			handleChildSelect(node) {
				this.$emit('node-select', node);
			}
		}
	};
</script>

<style scoped lang="scss">
	.tree-select {
		width: 100%;
	}

	.tree-node {
		width: 100%;
	}

	/* 节点内容容器 */
	.node-content {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 16rpx 20rpx;
		box-sizing: border-box;
		cursor: pointer;
		transition: background-color 0.2s;

		&:active {
			background-color: #f5f5f5;
			/* 点击反馈 */
		}
	}

	/* 选中状态样式 */
	.node-selected {
		background-color: #e6f7ff;

		.node-name {
			color: #0057b8;
			/* 选中时文字变色 */
			font-weight: 500;
		}
	}

	/* 层级缩进（控制左侧空白） */
	.node-indent {
		height: 100%;
	}

	/* 展开/收起图标 */
	.node-icon {
		margin-right: 12rpx;
		transition: transform 0.3s ease;
		/* 图标旋转动画 */
	}

	/* 节点名称 */
	.node-name {
		font-size: 28rpx;
		color: #333;
		line-height: 1;
	}
</style>